1. CSS Syntax :

Selector {
		 Property1 : Value1;
		 Property2 : Value2;
		 …
	 }

Example

p {
  color: black;
  background-color: white;
} 

CSS syntax consists of a selector and a declaration block where Selector is an HTML element which you want to style. Declaration block must be enclosed within { }. Declaration block contains many declaration statements separated by semicolon(;). Each declaration statement contains a CSS property and a value separated by a colon(:).

2. CSS Selectors :

CSS selectors are the HTML elements which you want to style. There are different ways to select an HTML element in CSS. Below table describes the same.

CSS Selectors	Example	Example Description
Name Selector	p { }	Selects all <p> elements.
ID Selector	#myID { }	Selects all elements with id=”myID”
Class Selector	.myClass { }	Selects the elements with class=”myClass”
Universal Selector	* { }	Selects all elements.
Group Selector	p, div, span { }	Selects all <p>, <div> and <span> elements
Descendant Selector	div a { }	Selects all <a> elements inside <div>
Child Selector	div > a { }	Selects <a> elements which are direct children of <div>
General Sibling Selector	div ~ a { }	Selects all <a> elements which are siblings of <div>
Adjacent Sibling Selector	div + a { }	Selects <a> which come after <div>
Pseudo Element Selectors	::after, ::before, ::first-letter, ::first-line, ::marker, ::selection	These are used to select and style a part of an element.
Pseudo Class Selectors	:active, :focus, :hover, :link, :visited, :target, :checked, :disabled, :enabled, :empty, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :invalid, :not(selector), :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :in-range, :out-of-range, :required, :optional, :read-only, :read-write	It selects the elements based on their state.
Attribute Selectors	[attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value]	It selects the elements based on attribute and value.

3. CSS Insertion :

There are three ways you can link CSS with an HTML document.

Type Of Link	Description	Example
External CSS	Linking external CSS file with an HTML file using <link> tag.	<link rel=”stylesheet” href=”style.css”>
Internal CSS	Defining page specific style using <style> element within an HTML page.	<style> body {color: black;} h1 {color: red;} </style>
Inline CSS	Defining element specific style using style attribute of an HTML element.	<p style=”color:black;”>Inline CSS</p>

1. CSS Backgrounds :

CSS background properties are used to add background effects to an HTML element.

Property	Values	Description
background-color	color | transparent | initial | inherit	It specifies background color of an element.
background-image	URL | none | initial | inherit	It is used to apply an image as a background to an element.
background-repeat	repeat | repeat-x | repeat-y | no-repeat | initial | inherit	This property specifies how background image should be repeated.
background-position	left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | x% y% | xpos ypos | initial | inherit	It specifies starting position of a background image.
background-attachment	scroll | fixed | local | initial | inherit	This property specifies whether the background image is fixed or scrolls with the rest of the page.
background-size	auto | length | cover | contain | initial | inherit	It specifies the size of the background image.
background-clip	border-box | padding-box | content-box | initial | inherit	It specifies how far the background color or background image should extend within an element
background-origin	padding-box | border-box | content-box | initial | inherit	It defines origin position of a background image.
background-blend-mode	normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity	It defines the blending mode of each background layer.
background	bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit	It is a shorthand property for all background properties. Using this property, you can specify all background properties in one line.

2. CSS Borders :

CSS border properties are used to define style for an element’s border.

Property	Values	Description
border-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | inherit | initial	It defines the style for all four borders of an element.
border-top-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | inherit | initial	It defines the style for top border of an element.
border-bottom-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | inherit | initial	It defines the style for bottom border of an element.
border-left-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | inherit | initial	It defines the style for left border of an element.
border-right-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | inherit | initial	It defines the style for right border of an element.
border-width	medium | thick | thin | length | initial | inherit	It specifies the width of all four borders of an element.
border-top-width	medium | thick | thin | length | initial | inherit	It specifies the width of top border of an element.
border-bottom-width	medium | thick | thin | length | initial | inherit	It specifies the width of bottom border of an element.
border-left-width	medium | thick | thin | length | initial | inherit	It specifies the width of left border of an element.
border-right-width	medium | thick | thin | length | initial | inherit	It specifies the width of right border of an element.
border-color	color | transparent | initial | inherit	It sets the color for all four borders of an element.
border-top-color	color | transparent | initial | inherit	It sets the color for top border of an element.
border-bottom-color	color | transparent | initial | inherit	It sets the color for bottom border of an element.
border-left-color	color | transparent | initial | inherit	It sets the color for left border of an element.
border-right-color	color | transparent | initial | inherit	It sets the color for right border of an element.
border-radius	length | % | initial | inherit	It applies rounded corners to an element.
border-top-left-radius	length | % | initial | inherit	It makes top left corner of an element rounded.
border-top-right-radius	length | % | initial | inherit	It makes top right corner of an element rounded.
border-bottom-left-radius	length | % | initial | inherit	It makes bottom left corner of an element rounded.
border-bottom-right-radius	length | % | initial | inherit	It makes bottom right corner of an element rounded.
border-image	source slice width outset repeat | initial | inherit	It specifies an image to be used as a border for an element.
border-image-source	none | URL | initial | inherit	It specifies path to an image to be used as a border of an element.
border-image-width	length | % | auto | initial | inherit	It specifies the width of a border image.
border-image-repeat	stretch | repeat | round | space | initial | inherit	It specifies whether the border image of an element should be repeated or stretched or rounded.
border-image-slice	number | % | fill | initial | inherit	It specifies how to slice the border image.
border-image-outset	length | number | initial | inherit	This property sets outset of a border image.
border	border-width border-style border-color | initial | inherit	It is a shorthand property for border-style, border-width and border-color.
border-bottom	border-width border-style border-color | initial | inherit	It is a shorthand property for border-bottom-style, border-bottom-width and border-bottom-color.
border-top	border-width border-style border-color | initial | inherit	It is a shorthand property for border-top-style, border-top-width and border-top-color.
border-left	border-width border-style border-color | initial | inherit	It is a shorthand property for border-left-style, border-left-width and border-left-color.
border-right	border-width border-style border-color | initial | inherit	It is a shorthand property for border-right-style, border-right-width and border-right-color.

3. CSS Margins :

CSS margin properties are used to apply space around HTML elements. Margin is the space around an element outside its border.

Property	Values	Description
margin	length | auto | initial | inherit	It used to set margin of an element around all sides – top, bottom, left and right.
margin-top	length | auto | initial | inherit	It sets top margin of an element.
margin-bottom	length | auto | initial | inherit	It sets bottom margin of an element.
margin-left	length | auto | initial | inherit	It sets left margin of an element.
margin-right	length | auto | initial | inherit	It sets right margin of an element.

4. CSS Padding :

CSS padding properties apply space between content of an HTML element and it’s border. Padding is the space around the content of an element inside its border.

Property	Values	Description
padding-top	length | initial | inherit	It sets top padding of an element.
padding-bottom	length | initial | inherit	It sets bottom padding of an element.
padding-left	length | initial | inherit	It sets left padding of an element.
padding-right	length | initial | inherit	It sets right padding of an element.
padding	length | initial | inherit	It sets padding at all sides of an element. It is a shorthand property for setting top, bottom, left and right padding in one statement.

5. CSS Dimensions :

CSS dimension properties are used to set the height and width of an element.

Property	Value	Description
height	auto | length | % | initial | inherit	It sets height of an element.
width	auto | length | % | initial | inherit	It sets width of an element.
max-height	none | length | % | initial | inherit	It sets maximum height of an element.
max-width	none | length | % | initial | inherit	It sets maximum width of an element.
min-height	length | % | initial | inherit	It sets minimum height of an element.
min-width	length | % | initial | inherit	It sets minimum width of an element.

6. CSS Shadow :

These properties are used to add shadow effect to an element.

Property	Value	Description
box-shadow	none | h-offset v-offset blur spread color | inset | initial | inherit	It adds shadow effect to an element.
text-shadow	h-shadow v-shadow blur-radius color | none | initial | inherit	It adds shadow effect to the text.

7. CSS Overflow :

These properties specify what to do when an element’s content is overflowed.

Property	Value	Description
box-shadow	none | h-offset v-offset blur spread color | inset | initial | inherit	It adds shadow effect to an element.
text-shadow	h-shadow v-shadow blur-radius color | none | initial | inherit	It adds shadow effect to the text.

8. CSS Outline :

CSS outline properties define outline drawn outside the border of an element.

Property	Value	Description
outline-style	dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | none | initial | inherit	It defines style for outline of an element.
outline-color	invert | color | initial | inherit	It specifies color for an outline.
outline-width	medium | thick | thin | length | initial | inherit	It specifies width of an outline of an element.
outline-offset	length | initial | inherit	This property adds space between outline and the border of an element.
outline	outline-width outline-style outline-color | initial | inherit	It is a shorthand property for outline-style, outline-color and outline-width.

9. CSS Text :

CSS text properties are used to style text of an HTML file.

Property	Value	Description
color	color | initial | inherit	It defines the color of a text.
font-family	family-name | generic-family | initial | inherit	It specifies the font family for a text.
font-size	medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit	It specifies font size of a text.
font-size-adjust	number | none | initial | inherit	It specifies the font-size adjustment when the selected font-size is not available.
font-stretch	ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit	It makes the text narrower or wider.
font-style	normal | italic | oblique | initial | inherit	It specifies font style for a text.
font-variant	normal | small-caps | initial | inherit	It applies font variation to a text.
font-weight	normal | bold | bolder | lighter | number | initial | inherit	It specifies font weight of a text.
font	font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit	It is a shorthand property for all font related properties.
text-align	left | right | center | justify | initial | inherit	This property horizontally aligns the text.
vertical-align	baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit	It specifies vertical alignment of not only text but any element.
text-align-last	auto | left | right | center | justify | start | end | initial | inherit	It specifies horizontal alignment for last line.
direction	ltr | rtl | initial | inherit	It sets writing direction of a text.
text-decoration-line	none | underline | overline | line-through | initial | inherit	It specifies the text decoration like underline, overline or line-thorugh.
text-decoration-style	solid | double | dotted | dashed | wavy | initial | inherit	It specifies the style for text decoration line.
text-decoration-color	color | initial | inherit	It specifies the color for text decoration line.
text-decoration-thickness	auto | from-font | length | percentage | initial | inherit	It specifies the thickness for text decoration line.
text-decoration	text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness | initial | inherit	It is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style and text-decoration-thickness i.e using this property, you can specify all these properties in a single line declaration.
text-transform	none | capitalize | uppercase | lowercase | initial | inherit	It defines uppercase or lowercase of a text.
text-indent	length | initial | inherit	It specifies indentation for first line in a text block.
line-height	normal | number | length | initial | inherit	It specifies height of a line.
letter-spacing	normal | length | initial | inherit	It adds the space between characters of a text.
word-spacing	normal | length | initial | inherit	It adds the space between words of a text block.
white-space	normal | nowrap | pre | pre-line | pre-wrap | initial | inherit	It specifies how to handle the white spaces in a text.
text-shadow	h-shadow v-shadow blur-radius color | none | initial | inherit	It adds the shadow effect to the text.
word-break	normal | break-all | keep-all | break-word | initial | inherit	It specifies how words should break at the end of a line.
word-wrap	normal | break-word | initial | inherit	It specifies how long words to be broken and wrap onto the next line.
writing-mode	horizontal-tb | vertical-rl | vertical-lr	It specifies how lines of text are laid out.
text-overflow	clip | ellipsis | string | initial | inherit	It specifies what to do with overflowed text.
text-justify	auto | inter-word | inter-character | none | initial | inherit	It specifies how to justify the text.

10. CSS Lists :

CSS list properties are used to style ordered and unordered lists.

Property	Value	Description
list-style-type	disc | circle | square | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-greek | upper-latin | upper-roman | armenian | none | initial | inherit	It specifies the list item marker in a list.
list-style-image	none | url | initial | inherit	It specifies an image as a list item marker.
list-style-position	inside | outside | initial | inherit	It sets the position of a list-item marker.
list-style	list-style-type list-style-position list-style-image | initial | inherit	It is a shorthand property for list-style-type, list-style-image and list-style-position.

11. CSS Table :

These properties are used to decorate a table.

Property	Value	Description
list-style-type	disc | circle | square | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-greek | upper-latin | upper-roman | armenian | none | initial | inherit	It specifies the list item marker in a list.
list-style-image	none | url | initial | inherit	It specifies an image as a list item marker.
list-style-position	inside | outside | initial | inherit	It sets the position of a list-item marker.
list-style	list-style-type list-style-position list-style-image | initial | inherit	It is a shorthand property for list-style-type, list-style-image and list-style-position.

12. CSS Visibility :

These properties control the visibility of an element.

Property	Value	Description
visibility	visible | hidden | collapse | initial | inherit	It specifies visibility of an element.
display	inline | block | grid | contents | flex | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | none | initial | inherit	It specifies display behavior of an element.

13. CSS Positions :

These properties are used to position an element.

Property	Value	Description
visibility	visible | hidden | collapse | initial | inherit	It specifies visibility of an element.
display	inline | block | grid | contents | flex | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | none | initial | inherit	It specifies display behavior of an element.

14. CSS Columns :

Property	Values	Description
column-count	number | auto | initial | inherit	It specifies the number of columns an element should be divided into.
column-gap	length | normal | initial | inherit	It specifies the gap between the columns.
column-width	auto | length | initial | inherit	It specifies the width of a column.
column-span	none | all | initial | inherit	It specifies how many columns a particular element should span across.
column-fill	balance | auto | initial | inherit	It specifies how to file the columns.
column-rule-style	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit	It specifies the style of a rule between the columns.
column-rule-color	color | initial | inherit	It specifies the color for the column rule.
column-rule-width	medium | thin | thick | length | initial | inherit	It specifies the width for the column rule.
column-rule	column-rule-width column-rule-style column-rule-color | initial | inherit	It is a shorthand property for column rule properties.
columns	auto | column-width column-count | initial | inherit	It is a shorthand property for column-width and column-count.

15. CSS Flexible Elements :

These properties are related to flexible HTML elements.

Property	Value	Description
order	number | initial | inherit	It specifies order for flexible items within the same container.
flex-basis	number | auto | initial | inherit	It specifies initial length of a flexible item.
flex-grow	number | initial | inherit	It specifies how much a flex item can grow within a container.
flex-shrink	number | initial | inherit	It specifies how much a flex item can shrink within a container.
flex-wrap	nowrap | wrap | wrap-reverse | initial | inherit	It specifies whether the flexible items should wrap or not.
flex-direction	row | row-reverse | column | column-reverse | initial | inherit	It specifies the direction for flexible items within a container.
flex-flow	flex-direction flex-wrap | initial | inherit	It is a shorthand property for flex-direction and flex-wrap properties.
flex	flex-grow flex-shrink flex-basis | auto | initial | inherit	It is a shorthand property for flex-grow, flex-shrink and flex-basis.
align-content	stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit	It is used to align flexible lines inside a flexible container.
align-items	stretch | center | flex-start | flex-end | baseline | initial | inherit	It is used to align flexible items inside a flexible container.
align-self	auto | stretch | center | flex-start | flex-end | baseline | initial | inherit	It is used to align selected item inside a flexible container.
justify-content	flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit	It auto-aligns the flexible items inside a flexible container.

16. CSS Transitions :

These properties are used to apply transition effects to an element.

Property	Value	Description
transition-property	none | all | property | initial | inherit	It specifies the CSS property for which transition effect will takes place.
transition-duration	time | initial | inherit	It specifies the duration of transition.
transition-delay	time | initial | inherit	It specifies when the transition effects will start.
transition-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit	It specifies the speed curve of the transition effect.
transition	property duration timing-function delay | initial | inherit	It is a shorthand property for all transition related properties.

17.CSS 2D / 3D :

Property	Value	Description
transition-property	none | all | property | initial | inherit	It specifies the CSS property for which transition effect will takes place.
transition-duration	time | initial | inherit	It specifies the duration of transition.
transition-delay	time | initial | inherit	It specifies when the transition effects will start.
transition-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit	It specifies the speed curve of the transition effect.
transition	property duration timing-function delay | initial | inherit	It is a shorthand property for all transition related properties.

18.CSS Animation :

Property	Values	Description
animation-name	keyframename | none | initial | inherit	It sets the name for animation.
animation-duration	time | initial | inherit	It specifies time duration of an animation.
animation-delay	time | initial | inherit	This property specifies time delay for the start of an animation.
animation-direction	normal | reverse | alternate | alternate-reverse | initial | inherit	It specifies how an animation should play – forward or backward or alternate.
animation-iteration-count	number | infinite | initial | inherit	It specifies how many times an animation should be played.
animation-play-state	paused | running | initial | inherit	It specifies whether an animation is running or paused.
animation-fill-mode	none | forwards | backwards | both | initial | inherit	It specifies the style when an animation is not playing.
animation-timing-function	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit	It specifies speed curve of an animation.
animation	name duration timing-function delay iteration-count direction fill-mode play-state	It is a shorthand property for animation properties.

19. CSS Grid :

Property	Value	Description
row-gap	length | normal | initial | inherit	It specifies the gap between the rows of a grid.
column-gap	length | normal | initial | inherit	It specifies the gap between the columns of a grid.
gap	row-gap column-gap	It is a shorthand property for row-gap and column-gap.
grid-row-start	auto | row-line	It specifies on which row to start displaying grid item.
grid-row-end	auto | row-line | span n	It specifies on which row grid item will end.
grid-row-gap	length	It specifies the gap between the rows of a grid layout.
grid-row	grid-row-start | grid-row-end	It is a shorthand property for grid-row-start and grid-row-end.
grid-column-start	auto | span n | column-line	It specifies on which column to start displaying grid items.
grid-column-end	auto | span n | column-line	It specifies on which column grid items will end.
grid-column-gap	length	It specifies the gap between the columns of a grid layout.
grid-column	grid-column-start / grid-column-end	It is a shorthand property for grid-column-start and grid-column-end.
grid-gap	grid-row-gap grid-column-gap	It is a shorthand property for grid-row-gap and grid-column-gap.
grid-area	grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname	It is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end. You can also use it to name a grid item.
grid-auto-rows	auto | max-content | min-content | length	It sets the default row size of a grid layout.
grid-auto-columns	auto | max-content | min-content | length	It sets default column size.
grid-auto-flow	row | column | dense | row dense | column dense	It specifies how auto placed items will be inserted in the grid.
grid-template-rows	none | auto | max-content | min-content | length | initial | inherit	It specifies height and number of rows in a grid layout.
grid-template-columns	none | auto | max-content | min-content | length | initial | inherit	It specifies width and number of columns in a grid layout.
grid-template-areas	none | itemnames	It specifies how to display grids using grid names.
grid-template	none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit	It si a shorthand property for grid-template-rows, grid-template-columns and grid-template-areas properties.
grid	none | grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit	It is a shorthand property for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow prpoperties.